<template>
    <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
    >
        <div class="logobox">
            <img class="logoimg" src="../../assets/img/cat-logo.jpg" alt="">
        </div>
        <el-submenu index="1">
            <template slot="title">
                <i class="el-icon-goods"></i>
                <span>基础管理</span>
            </template>

            <el-menu-item-group>
                <router-link to="/index" style="text-decoration: none">
                <el-menu-item index="1-1">宠物管理</el-menu-item>
                </router-link>
            </el-menu-item-group>

            <el-menu-item-group>
                <router-link to="/index/user" style="text-decoration: none">
                <el-menu-item index="1-2">用户管理</el-menu-item>
                </router-link>
            </el-menu-item-group>
            <el-menu-item-group>
                <router-link to="/index/order" style="text-decoration: none">
                    <el-menu-item index="1-3">订单管理</el-menu-item>
                </router-link>
            </el-menu-item-group>

            <el-menu-item-group>
                <router-link to="/index/permission" style="text-decoration: none">
                    <el-menu-item index="1-4">权限管理</el-menu-item>
                </router-link>
            </el-menu-item-group>

        </el-submenu>

        <el-submenu index="2">
            <template slot="title">
                <i class="el-icon-document"></i>
                <span>监控管理</span>
            </template>
            <el-menu-item-group>
                <router-link to="/index/sql" style="text-decoration: none">
                    <el-menu-item index="2-1">数据监控</el-menu-item>
                </router-link>
            </el-menu-item-group>
            <el-menu-item-group>
                <router-link to="/index/swagger" style="text-decoration: none">
                    <el-menu-item index="2-2">文档查看</el-menu-item>
                </router-link>
            </el-menu-item-group>
            <el-menu-item-group>
                <router-link to="/index/blog" style="text-decoration: none">
                    <el-menu-item index="2-3">博客查看</el-menu-item>
                </router-link>
            </el-menu-item-group>
        </el-submenu >

        <router-link to="/index/chart" style="text-decoration: none">
        <el-menu-item index="3" >
            <i class="el-icon-setting"></i>
            <span slot="title">
                    图表管理
            </span>
        </el-menu-item>
        </router-link>

        <el-submenu index="4">
            <template slot="title">
                <i class="el-icon-location"></i>
                <span>系统工具</span>
            </template>
            <router-link to="/index/hot" style="text-decoration: none">
            <el-menu-item index="4-1">热榜数据</el-menu-item>
            </router-link>
        </el-submenu>
    </el-menu>

</template>

<script>
    export default {
        data() {
            return {

            };
        },
        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            }
        }

    }
</script>

<style scoped>
    .logoimg{
        position: relative;
        left: 30%;
    }
</style>
